import { View } from "@tarojs/components";
import { useEffect, useRef, useState } from "react";

interface SelectDownProps {
  menus: Array<{ id: string; label: string }>;
  select: (menu: string) => void;
  current: string;
}

export default ({ menus, select, current }: SelectDownProps) => {
  const [show, setShow] = useState(false);
  const [title, setTitle] = useState(
    menus.find((menu) => menu.id === current)?.label
  );

  return (
    <View className="relative">
      {/* <View className="absolute inset-0" onClick={() => setShow(false)}></View> */}
      <View onClick={() => setShow(true)}>{title}</View>
      <View className=" absolute">
        {show &&
          menus.map((menu) => (
            <View
              onClick={() => {
                select(menu.id);
                setTitle(menu.label);
                setShow(false);
              }}
            >
              {menu.label}
            </View>
          ))}
      </View>
    </View>
  );
};
